<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <div class="framework">
      <div class="container box">
          <header>
            <hgroup>
              <h1>我是主标题</h1>
              <h2>我是副标题</h2>
            </hgroup>
            <p>
              我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题
              我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题
            </p>

          </header>
          <nav>
            <!-- <a href="#"> 主页 </a>
            <a href="#"> 产品 </a>
            <a href="#"> 项目 </a>
            <a href="#"> 关于我们 </a> -->
            <div class="menu">菜单 >></div>
            <ul>
              <li><a href="#"> 主页 </a></li>
              <li><a href="#"> 产品 </a></li>
              <li><a href="#"> 项目 </a>
                <ul>
                  <li><a href="#">Node.js</a>
                    <ul>
                        <li><a href="#">npm</a></li>
                        <li><a href="#">express</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Three.js</a></li>
                  <li><a href="#">CQRS.js</a></li>
                </ul>
              </li>
              <li><a href="#"> 关于我们 </a></li>
            </ul>
          </nav>
          <div class="main">
            <section class="product-list">
                <h1> 产品展示 </h1>
                <div class="product">
                  <h4> 产品名称 </h4>
                  <img src="p.jpg" alt="">
                  <p> 产品描述 </p>
                </div></section>
          </div>
          <!-- <aside><img src="" alt=""></aside> -->
          <footer>
            <nav>
                <a>Companies</a>
                <a>Product Store</a>
                <a>Events</a>
                <a>Related Activities</a>
            </nav>
          </footer>
      </div>
      <div class="left box"></div>
      <div class="right box">
        <div class="rightf_box">广告位:
          我们可以放一个带链接的图片当作广告，底部带有关闭文字 设置关闭特效
        </div>
      </div>
    </div>

    <script type="text/javascript">
        const pdom = document.querySelector(".product");
        const productListDom = document.querySelector(".product-list");

        for(let i=0;i<20;i++){
          productListDom.insertAdjacentHTML("beforeEnd", pdom.outerHTML);
        }
        
        const menuDom = document.querySelector(".menu");
        const ulDom = document.querySelector(".container > nav > ul")
        menuDom.addEventListener("click", function() {
          ulDom.classList.toggle("open");
        });
        // pdom.remove();
        // pdom.outerHTML);
        
        // const containerdom = document.querySelector("div.container");
        // console.log(containerdom.style.backgroundColor);
        // console.log(containerdom);
    </script>
  </body>
</html>